<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>laytpl模板引擎</title>

    <link rel="stylesheet" href="../zujian/layui/css/layui.css">

    <!--这个在我建立了 undefinedcss 放入之后其实不用也可以,但是建议还是写出来-->
    <link rel="stylesheet" href="../zujian/layer/theme/default/layer.css">



</head>
<body>

<script src="../zujian/layui/layui.all.js"></script>
<!--  //第一步：编写模版。你可以使用一个script标签存放模板，如： -->
<script id="demo001" type="text/html">
    <h3>{{ d.title }}</h3>
    <ul>
        {{#  layui.each(d.list, function(index, item){ }}
        <li>
            <span>{{ item.modname }}</span>
            <span>{{ item.alias }}：</span>
            <span>{{ item.site || '' }}</span>
        </li>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>

<!-- //第二步：建立视图。用于呈现渲染结果。 -->
<div id="view"></div>


<script type="text/javascript">
    let laytpl=layui.laytpl;
    //第三步：渲染模版
    var data = { //数据
        "title":"Layui常用模块"
        ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
    }

    // getTpl就是 <script id="demo001" type="text/html">  中的模板
    var getTpl = demo001.innerHTML
        ,view = document.getElementById('view');
    laytpl(getTpl).render(data, function(html){
        view.innerHTML = html;
    });
</script>


<!--
http://localhost:63342/layui01/ceshi01/undefinedcss/modules/layer/default/layer.css?v=3.1.1
-->

<!--
如果模版默认的 {{ }} 分隔符与你的其它模板（一般是服务端模板）存在冲突，你也可以重新定义分隔符：
laytpl.config({
  open: '<%',
  close: '%>'
});

laytpl 应用在 layui 的很多模块中，如：layim、table 等。尽管传统意义的前端模板引擎已经变得不再流行，
但 laytpl 仍然可以发挥一定作用，不妨尝试一下吧。
-->

</body>
</html>